function qh(){
	//获取元素节点(id和选择器获取 返回的是查找到的第一个节点) （通过classname和Tagname查找 返回的是一个集合）
	var imgshow = document.querySelector('#ck img.show')
	//同理实现下面边框自动切换
	var lishow = document.querySelector('#icon-list li.show')
	//判断下一个节点是否有值
	if(imgshow.nextElementSibling){
		//传递class=show
		imgshow.nextElementSibling.className = 'show'
		lishow.nextElementSibling.className = 'show'
		//将原先class=show 显示图片清除
		imgshow.className = '';
		lishow.className = '';
	}
	else{
		//通过查找父元素的第一个子元素来实现 返回第一张图片
		document.getElementById('ck').firstElementChild.className = 'show'
		document.getElementById('icon-list').firstElementChild.className = 'show'
		imgshow.className = '';
		lishow.className = '';
	}

}
//循环定时器 调用函数
var timer = setInterval(qh,1000)

//点击img 切换对应图片显示 img边框
function lick(obj){
//形参obj 接受点击触发时实际传递的参数this
//给onclick添加参数this 来确定点击的按钮并返回该对象li
	//清除自动切换
	clearInterval(timer)
	//取消正在显示的图片以及指示点
	document.querySelector('#ck img.show').className = '';
	document.querySelector('#icon-list li.show').className = '';
	//让点击的指示点和对应图片显示
	obj.className = 'show';
	//图片和指示点对应（li在btnlist是第几个 img是#ck中的第几个）
	//获取li 与 img 的集合
	var lilist = document.querySelectorAll('#icon-list li');
	var imglist = document.querySelectorAll('#ck img');
	//判断被点击obj 是集合中的第几个
	for(var i=0; i<lilist.length; i++){
		if(lilist[i]==obj){
			imglist[i].className = 'show';
			break;
		}
	}
	//执行完之后 恢复自动切换
	timer = setInterval(qh,1000)
}

//鼠标放置图片时停止切换
function stopqh(obj){
	if (obj) {
		//清除自动切换
	clearInterval(timer)
	}
}
//鼠标移开图片开启自动切换
function startqh(obj){
	if (obj) {
	timer = setInterval(qh,1000)
	}
}

//加入购物车
function addshoppingcar(){
            var htp = new XMLHttpRequest();
			//绑定监听事件
			htp.onreadystatechange = function(){
				if (this.readyState==4&&this.status==200) {
					//console.log(this.responseText)
					alert("加入购物车成功")
				}
			}
			//前端传参 DOM操作 获取节点元素 商品id 商品名称 商品图片 商品价格 （地址？） 商品数量 商品颜色（尺寸）
			var goodsid = document.getElementById('goodsid').innerHTML;
			var goodsname = document.getElementById('goodsname').textContent;
			var goodsimg = document.getElementById('goodsimg').src;
			var goodsprice = document.getElementById('goodsprice').textContent;
			var goodscount = document.getElementById('result').value;
			var userid = document.getElementById('userid').innerHTML;
			//var goodscolor = document.getElementById('colortext1').value;
			if (document.getElementById('color1').className == "selected"){
			    var goodscolor = document.getElementById('colortext1').textContent
			}
			else if (document.getElementById('color2').className == "selected"){
			    var goodscolor = document.getElementById('colortext2').textContent
			}
			else
			    var goodscolor = ""
			//3.设置请求信息 参数请求方式 路由 是否为异步 默认true
			//post方式请求 发送参数 需要设置请求的头部信息
			htp.open('POST','/shoppingcar/');
			htp.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
			//发送请求
			htp.send('goodsname='+goodsname+'&goodsimg='+goodsimg+'&goodsprice='+goodsprice+'&goodscount='+goodscount+'&goodscolor='+goodscolor+'&goodsid='+goodsid+'&userid='+userid);

}

//按钮数量加减
function sum() {
            var a = 1;
            var b = document.getElementById("result").value;
            c = Number(a) + Number(b);
            document.getElementById('result').value = c;
}
function sub() {
            var a = 1;
            var b = document.getElementById("result").value;
            c = Number(b) - Number(a);
            if (c<1) {
                document.getElementById('result').value = 1;
            }
            else{
                document.getElementById('result').value = c;
            }
}
//选择颜色按钮
function choosecolor1(){
        //获取元素 更改样式
        document.getElementById('color1').className = "selected";
        if (document.getElementById('color2').className == "selected"){
            document.getElementById('color2').className = ""
        }
}
function choosecolor2(){
        //获取元素 更改样式
        document.getElementById('color2').className = "selected";
        if (document.getElementById('color1').className == "selected"){
            document.getElementById('color1').className = ""
        }
}













